<script lang="ts" setup>
import { hBtns, UiDataView ,openModal} from '../../utils'
import { Delete, Plus } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { DataViewRef, PageFetchAction, TableCellBtn, TableColumnConfig } from '../../utils/types'
import { plugTypes } from '../../utils'

const tableRef: DataViewRef = ref()

const columns = [
  { type: 'selection', width: 50 },
  { label: '插件名称', prop: 'plugName' },
  { label: '插件类型' },
  { label: '配置模板' },
  { label: '状态' },
  {
    label: '操作',
    fixed: 'right',
    width: 100,
    render (h, { row }) {
      return hBtns({ label: '修改', onClick: onEdit.bind(null, row) } as TableCellBtn)
    }
  }
] as TableColumnConfig<any>[]

const fetchAction: PageFetchAction = params => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        total: 2,
        rows: [{ plugName: 'test' }]
      })
    }, 500)
  })
}

const onDelete = (rows: any[]) => {
  tableRef.value.deleteRows(() => {
    return Promise.resolve()
  })
}

const onEdit = (row?: any) => {
  openModal(() => import('./PlugEdit.vue'), {
    row,
    width: "650px",
    title: `${row ? '编辑' : '新增'}`,
    onSubmitted ({ form }) {

    }
  })
}
onMounted(async () => {
  await tableRef.value.setInitForm({ namelist: '1' })
  tableRef.value.getData()
})
</script>

<template>
  <UiDataView ref="tableRef" :columns="columns" :fetch-action="fetchAction">
    <template #search="{ form, onSearch }">
      <ElFormItem label="插件名称">
        <ElInput v-model="form.ruleName" placeholder="请输入插件名称" @keyup.enter="onSearch" />
      </ElFormItem>
      <ElFormItem label="插件类型">
        <ElSelect clearable v-model="form.plugType">
          <ElOption v-for="_ in plugTypes" :key="_" :value="_" :label="_" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="状态">
        <ElSelect clearable v-model="form.statuType" >
          <ElOption :value="0" label="启用" />
          <ElOption :value="1" label="禁用" />
        </ElSelect>
      </ElFormItem>
    </template>
    <template #actions="{ selectedRows }">
      <ElButton :icon="Plus" type="primary" @click="onEdit()">新增</ElButton>
      <ElButton
        type="danger"
        :icon="Delete"
        :disabled="selectedRows.length < 1"
        @click="onDelete(selectedRows)">删除</ElButton>
    </template>
  </UiDataView>
</template>
